<template>
  <div
    class="relative flex flex-col w-full h-full mb-8 text-gray-700 bg-white shadow-md rounded-[7px] bg-clip-border border-t"
  >
    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
        <div class="overflow-hidden">
          <table
            class="min-w-full text-left text-sm font-light text-surface dark:text-white"
          >
            <thead
              class="border-b border-neutral-200 font-medium dark:border-white/10"
            >
              <tr>
                <th
                  scope="col"
                  class="px-6 py-4"
                ></th>
                <th
                  scope="col"
                  class="px-6 py-4"
                >
                  ID
                </th>
                <th
                  scope="col"
                  class="cursor-pointer"
                  @click="sort(SortBy.name)"
                >
                  <div class="flex justify-center items-center gap-2">
                    <span>Имя</span> <ChevronDownIcon />
                  </div>
                </th>
                <th
                  scope="col"
                  class="cursor-pointer flex justify-center items-center gap-2"
                  @click="sort(SortBy.surname)"
                >
                  <span>Фамилия</span> <ChevronDownIcon />
                </th>
                <th
                  scope="col"
                  class="px-6 py-4"
                >
                  E-mail
                </th>
                <th
                  scope="col"
                  class="px-6 py-4 cursor-pointer flex justify-center items-center gap-2"
                  @click="sort(SortBy.status)"
                >
                  <span>Статус</span> <ChevronDownIcon />
                </th>
                <th
                  scope="col"
                  class="px-6 py-4"
                ></th>
              </tr>
            </thead>
            <tbody>
              <AppTableRow
                :user="user"
                v-for="user in users"
                :key="user.id"
              />
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { User } from "~/types/user";
  import { SortBy } from "~/types/enums";

  defineProps({
    users: {
      type: Array as PropType<User[]>,
    },
  });

  const sort = (sortBy: SortBy) => {
    emit("sortBy", sortBy);
  };
  const emit = defineEmits(["sortBy"]);
</script>
